<template>
    <div class="">
        <el-card class="box-card">
            <el-button type="primary" class="mb10" @click="addRole">添加角色</el-button>
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column prop="id" label="ID" width="180" align="center"> </el-table-column>
                <el-table-column prop="name" label="角色名称" width="180" align="center"> </el-table-column>
                <el-table-column prop="isAdmin" label="是否是管理员" align="center"> </el-table-column>
                <el-table-column prop="remark" label="角色说明" align="center"> </el-table-column>
                <el-table-column prop="time" label="创建时间" align="center"> </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                        <el-button type="primary" @click="dele(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 编辑角色信息面板 -->
        <el-dialog title="编辑角色信息" :visible.sync="editDialogVisible" width="50%" @close="editDiaClosed">
            <el-form ref="editform" :model="form" label-width="80px">
                <el-form-item label="ID">
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="角色名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="角色说明">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item label="选择权限">
                    <el-tree :data="allPermissionList" show-checkbox node-key="code" ref="tree" highlight-current :props="defaultProps">
                    </el-tree>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 添加角色信息面板 -->
        <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%" @close="editDiaClosed">
            <el-form ref="addform" :model="addRoleForm" label-width="100px">
                <el-form-item label="角色名称">
                    <el-input v-model="addRoleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="角色说明">
                    <el-input v-model="addRoleForm.remark"></el-input>
                </el-form-item>
                <el-form-item label="角色权限集合">
                    <el-tree :data="allPermissionList" show-checkbox node-key="code" ref="tree" highlight-current :props="defaultProps">
                    </el-tree>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getRoleInfo, UpdateRoleInit, deleteRole, UpdaterRoleInfo, addRoleInit, addRole } from '@/api/role.js'
export default {
  name: 'usermanage',
  data () {
    return {
      tableData: [],
      total: 0,
      query: {
        pagesize: 3,
        pagenum: 1,
        name: ''
      },
      form1: {
        id: '',
        name: '',
        remark: '',
        codeItem: []
      },
      list: [],
      codeStr: '',
      allPermissionList: [],
      editPermissionList: [],
      // 添加角色对象
      addRoleForm: {
        code: '',
        category: 10,
        id: '',
        name: '',
        remark: ''
      },
      roleId: '',
      addDialogVisible: false,
      editDialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      roleInfo: {},
      form: {},
      addRoleInfo: {}
    }
  },
  created () {
    this.getRoleInfo()
  },
  mounted () {

  },
  methods: {
    async getRoleInfo () {
      const { Data } = await getRoleInfo({
        pageIndex: 1,
        pageSize: 20,
        name: ''
      })
      this.total = Data.paging.totalItemCount
      this.tableData = Data.list
      console.log(Data.paging.totalItemCount)
      console.log(Data)
    },

    // 编辑角色信息
    edit (role) {
      this.roleId = role.id
      console.log(role)
      this.editDialogVisible = true
      this.updateRoleInit()
    },

    // 编辑角色信息前初始化角色信息,获得所有权限列表和该用户权限
    async updateRoleInit () {
      // 获取所有权限
      const { Data: res } = await addRoleInit()
      this.allPermissionList = res.list
      console.log(this.allPermissionList)
      // 获取该用户权限
      const { Data } = await UpdateRoleInit({
        id: this.roleId
      })
      this.roleInfo = Data.role
      this.list = Data.list
      this.form = { ...this.roleInfo }
      this.getLeafKeys(Data.list, this.editPermissionList)
      // 通过递归形式,获取所有权限的code值
      console.log('被选中的数组code值---', this.editPermissionList)
      this.codeStr = this.editPermissionList.join(',')
      // console.log(codeStr)
      this.$refs.tree.setCheckedKeys(this.editPermissionList)
    },

    // 递归获取codezhi
    getLeafKeys (node, arr) {
      node.forEach((t) => {
        if (t.children.length === 0) return arr.push(t.code)
        this.getLeafKeys(t.children, arr)
      })
    },

    async confirmEdit () {
      this.form1.codeItem = this.$refs.tree.getCheckedNodes().filter(item => !isNaN(Number(item.code)))
      this.form1.name = this.form.name
      this.form1.id = this.form.id
      this.form1.remark = this.form.remark
      const data = await UpdaterRoleInfo({
        ...this.form1
      })
      if (data.RequestStatus !== 200) return this.$message.error('修改信息失败')
      this.$message.success('修改信息成功')
      this.editDialogVisible = false
      this.getRoleInfo()
      this.editPermissionList = []
      this.codeStr = ''
    },

    // 删除角色
    async dele (role) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }
      const data = await deleteRole({
        id: role.id
      })
      if (data.RequestStatus !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.getRoleInfo()
    },

    // 添加角色
    addRole () {
      this.addDialogVisible = true
      this.getRoleInfoInit()
    },

    async getRoleInfoInit () {
      const { Data } = await addRoleInit()
      this.allPermissionList = Data.list
      console.log(Data)
    },

    async confirmAdd () {
      const codeItem1 = this.$refs.tree.getCheckedNodes()
      console.log('============', codeItem1)
      const codeItem = []
      codeItem1.forEach(x => {
        x = x.children.map(t => { return { Code: t.code, category: t.category.toString() } })
        codeItem.push(...x)
      })
      console.log(codeItem)
      // console.log(codeItem)
      // console.log(codeItem.children.map((x) => { return { Code: x.code, category: x.category } }))
      // const code1 = []
      // codeItem.forEach(t => {
      //   t.children.forEach(x => {
      //     code1.push(x.code)
      //   })
      // })
      // console.log('权限编吗集合是---------', code1)
      // const code = code1.join(',')
      // const data = await addRole({
      //   name: this.addRoleForm.name,
      //   remark: this.addRoleForm.remark,
      //   codeItem
      // })
      // console.log(data)
      // if (data.RequestStatus !== 200) return this.$message.error('添加角色失败')
      // this.$message.success('添加角色成功')
      // this.addDialogVisible = false
      // this.getRoleInfo()
    },

    // 编辑角色信息面板关闭
    editDiaClosed () {
      this.form = {
        id: '',
        name: '',
        remark: '',
        codeItem: []
      }
      this.addRoleForm = {
        code: '',
        category: 10,
        id: '',
        name: '',
        remark: '',
        codeItem: []
      }
    }
  }
}
</script>

<style scoped>
.mb10 {
    margin-bottom: 10px;
}
/* .el-input {
    width: 200px;
} */
.el-form {
    display: flex;
    flex-wrap: wrap;
}
.el-form--inline .el-form-item {
    display: flex;
    flex: 25%;
}
.el-form--inline .el-form-item {
    margin-right: 0px;
}
.el-input__inner {
    padding: 0 30px;
}
.el-form-item__content {
    flex: 1;
}
</style>
